<template>
  <div class="box">
    <!-- <ShouHua/> -->
    <div class="boxbx">
        <div class="header">
            <span class="iconfont icon-zuojiantou nihao" @click="fun()"></span>
            <span>热卖爆品【财源广进】高端商务三脚</span>
            <span class="fengxiang"><van-icon name="share-o" /></span>
        </div>
        <van-swipe class="my-swipe"  indicator-color="white">
        <van-swipe-item><img src="yangchao/imgs/1.1.jpg" alt=""></van-swipe-item>
        <van-swipe-item><img src="yangchao/imgs/1.2.jpg" alt=""></van-swipe-item>
        <van-swipe-item><img src="yangchao/imgs/1.3.jpg" alt=""></van-swipe-item>
        <van-swipe-item><img src="yangchao/imgs/1.4.jpg" alt=""></van-swipe-item>
        </van-swipe>
        <div class="Price">
            <h2>￥98-239</h2>
            <p class="nianxiao">年销1119</p>
        </div>
        <br>
        <div class="caiyuan">
            <p>热卖爆品【财源广进】高端商务三脚开业花篮架全程配送</p>
        </div>
        <br>
        <div class="fenge">
        </div>
        <div class="guige">
            <p>选择</p>
            <span>规格></span>
        </div>
        <div class="fenge">
        </div>
        <van-tabs  scrollspy sticky>
            <van-tab title="商品详情">
                <div class="xiangqing">
                    <br>
                    <h4>商品详情</h4>
                    <br>
                </div>
                <div class="guige2">
                    <p class="center">商品规格</p>
                    <div></div>
                    <img src="yangchao/imgs/xiangqing.jpg" alt="">
                    <p>【财源广进】百合款</p>
                    <span>尺寸：</span> &nbsp &nbsp &nbsp &nbsp<span>35cm×35cm×168cm</span>
                    <br>
                    <br>
                    <img src="yangchao/imgs/xiangqing1.jpg" alt="">
                    <p>【财源广进】混搭款</p>
                    <span>尺寸：</span> &nbsp &nbsp &nbsp &nbsp<span>35cm×35cm×168cm</span>
                    <br>
                    <br>
                    <p class="center">查看更多商品规格<van-icon name="arrow-down" /></p>
                    <br>
                    <br>
                    <p class="center">商品信息</p>
                    <div></div>
                    <p class="weight">适用场景：其他、访友送礼、开业贺礼、乔迁贺 &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp   &nbsp &nbsp &nbsp &nbsp 礼、 商户会客、 绿植盆栽</p>
                    <p class="weight">适用节日: 圣诞节、 教师节、 光棍节、重阳节、&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp元旦、春节</p>
                    <br>
                    <p class="center">图文详情</p>
                    <div></div>
                    <p class="margain">本店开业花篮款式品种多样，如需更多了解可咨询 客服！ </p>
                    <p>西安市全程可以配送，如需配送请联系客服！</p>
                    <br>
                    <img src="yangchao/imgs/xiangqing2.jpg" alt="">
                    <img src="yangchao/imgs/xiangqing3.jpg" alt="">
                </div>
            </van-tab>
            <br>

            <div class="fenge"></div>
            <van-tab title="购买须知">
                <br>
                <div class="tuikuan">
                    <p>购买须知</p>
                    <br>
                    <p class="weight">退款规则</p>
                    <p>•商户接单前，可随时退还全部实付金额（商户超时未 &nbsp 接单自动退)</p>
                    <p>•商户接单后未完成消费前，退款申请需商户同意，请 &nbsp 与商户协商后发起退款申请</p>
                    <br>
                </div>
            </van-tab>
            <div class="fenge"></div>
            <br>
            <van-tab title="网友评价">
                <div>
                    <div class="wangyou">
                        
                        <p>网友评价（162）</p>
                        <br>
                        <br>
                        <span><van-icon name="arrow" /></span>
                        
                    </div>
                    <div class="touxiangbx">
                        <div class="touxiang">
                            <img src="yangchao/imgs/1.1.jpg" alt="">
                            <p>打分</p>
                            <span class="chapin"><van-icon name="star" /></span>
                            <span><van-icon name="star" /></span>
                            <span><van-icon name="star" /></span>
                            <span><van-icon name="star" /></span>
                            <span><van-icon name="star" /></span>
                        </div>
                        
                    </div>
                    <div class="yonghu">
                        <span class="weight">时间</span> <span class="weight">2022-09-26 11:29</span>
                        <p>我从来不给差评 我非常生气 太搞笑了，送货前都没有给我拍照确认就发出，多...</p>
                        <img src="yangchao/imgs/pinlun.jpg" alt="">
                                <br>
                                <br>
                                <!-- <br> -->

                        <div class="flex">
                            <div class="box1">
                                <span class="weight">167人看过</span>
                            </div>
                            <div class="dianzan">
                                <div><van-icon name="good-job-o" />赞</div>
                                &nbsp
                                <div><van-icon name="other-pay" />4</div>
                            </div>
                            
                        </div>
                    </div>
                    <br>
                    <div class="touxiangbx">
                        <div class="touxiang">
                            <img src="yangchao/imgs/1.2.jpg" alt="">
                            <p>打分</p>
                            <span class="chapin"><van-icon name="star" /></span>
                            <span><van-icon name="star" /></span>
                            <span><van-icon name="star" /></span>
                            <span><van-icon name="star" /></span>
                            <span><van-icon name="star" /></span>
                        </div>
                        
                    </div>
                    <div class="yonghu">
                        <span class="weight">时间</span> <span class="weight">2022-09-26 11:29</span>
                        <p>我从来不给差评 我非常生气 太搞笑了，送货前都没有给我拍照确认就发出，多...</p>
                        <img src="yangchao/imgs/pinlun1.jpg" alt="">
                        <!-- <img src="yangchao/imgs/pinlun2.jpg" alt=""> -->
                        <div class="flex">
                            <div class="box1">
                                <span class="weight">1218人看过</span>
                            </div>
                            <div class="dianzan">
                                <div><van-icon name="good-job-o" />2</div>
                                &nbsp
                                <div><van-icon name="other-pay" />7</div>
                            </div>
                        </div>
                    </div>
                    <br>
                    <div class="dibu1">
                        <p>查看网友全部评价</p>
                        <p><van-icon name="arrow" /></p>
                    </div>

                </div>
            </van-tab>
        </van-tabs>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Swipe, SwipeItem} from 'vant';
Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
   methods:{
    fun(){
        this.$router.push("/yccera")
    }
   }
}
</script>

<style scoped lang="scss">
*{
    margin: 0;
    padding: 0;
}
.fengxiang{
    font-size: 5.333vw;

}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 5.333vw;
    text-align: center;
  }
  .box{
    width: 100vw;
    height: 75.2vw;
    .nihao{
        font-size: 7.467vw;
        width: 10.133vw;
    }
    .boxbx{
        width: 100vw;
        height: 75.2vw;
        .guige{
            width: 93.334vw;
            height: 10.667vw;
            line-height: 10.667vw;
            margin: auto;
            display: flex;
            justify-content: space-between;
            span{
                color: #999;
            }
        }
        .fenge{
            height: 2.667vw;
            background-color: #eee;
        }
        .caiyuan{
            width: 93.334vw;
            margin: auto;
        }
        .Price{
            width: 93.334vw;
            margin: auto;
            display: flex;
            justify-content: space-between;
            .nianxiao{
                font-size: 3.733vw;
                color: #999;
                line-height: 8.533vw;
                height: 8.533vw;
                line-height: 8.533vw;
            }
            h2{
                color: #f2672c;
            }
        }
        .header{
            width: 93.334vw;
            height: 10.667vw;
            text-align: center;
            line-height: 10.667vw;
            display: flex;
            justify-content: space-between;
        }
        img{
            width: 100vw;
            height: 75.2vw;
        }
        .xiangqing{
            width: 93.333vw;
            margin: auto;
        }
        .guige2{
            width: 93.333vw;
            margin: auto;
            img{
                width: 93.333vw;
                height: 106.667vw;
            }
            .center{
                text-align: center;
            }
            div{
                width: 13.333vw;
                height: 1.6vw;
                background-color: #eee;
                margin: 2.667vw auto;
            }
            
        }
        .fenge{
            width: 100%;
            height: 2.667vw;
            background-color: #eee;
        }
        .wangyou{
            width: 93.333vw;
            margin: auto;
            display: flex;
            justify-content: space-between;
        }
        .tuikuan{
               width: 93.333vw;
                margin: auto; 
                p{
                    margin: 2.133vw 0;
                }
        }
        .touxiangbx{
            width: 93.333vw;
            margin: auto;
            display: flex;
            justify-content: space-between;
            .touxiang{
                height: 10.667vw;
                line-height: 10.667vw;
                display: flex;
                justify-content: space-between;
                p{
                    margin-left: 2.667vw;
                }
                img{
                    width: 10.667vw;
                    height: 10.667vw;
                    border-radius: 50%;
                }
                span{
                    height: 5.333vw;
                    line-height: 5.333vw;
                    margin-left: 1.067vw;
                    background-color: #eee;
                    color: white;
                    margin-top: 2.667vw;
                }
                .chapin{
                    color: #f2672c;
                }
                
            }
        }
        .yonghu{
            margin-left: 17.333vw;
            .flex{
                display: flex;
                justify-content: space-between;
                .dianzan{
                    display: flex;
                    justify-content: space-between;
                    div{
                        width: 16vw;
                        height: 5.333vw;
                        text-align: center;
                        border-radius: 2.667vw;
                        border: 0.267vw solid #999;
                    }
                }
            }
            img{
                width: 37.333vw;
                height: 37.333vw;
            }
        }
        .weight{
            font-weight: 100;
            font-size: 4vw;
        }
        .margain{
            margin: 1.333vw 0;
        }
        .dibu1{
            border-top:0.267vw solid #999;
            width: 93.333vw;
            height: 16vw;
            line-height: 16vw;
            font-weight: 600;
            margin: auto;
            display: flex;
            justify-content: space-between;
        }
    }
}
</style>